﻿<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>顺势AI教育大数据中心</title>
    <link rel="stylesheet" href="./css/index.css">
    <link rel="stylesheet" href="./fonts/icomoon.css">
</head>

<body>
    <div class="viewport">
        <div class="column">
            <!--概览-->
            <div class="overview panel">
                <div class="inner">
                    <div class="item">
                        <h4 id="h_xiaohao">2,190 </h4>
                        <span>
                            <i class="icon-dot" style="color: #006cff"></i>
                            当前用户数量
                        </span>
                    </div>
                    <div class="item">
                        <h4 id="h_zhengshi">3,001</h4>
                        <span>
                            <i class="icon-dot" style="color: #6acca3"></i>
                            新增学员
                        </span>
                    </div>
                    <div class="item">
                        <h4 id="h_keyong">190</h4>
                        <span>
                            <i class="icon-dot" style="color: #6acca3"></i>
                            充值数量
                        </span>
                    </div>
                   
                    <div class="item">
                        <h4 id="h_jiamengshang">108</h4>
                        <span>
                            <i class="icon-dot" style="color: #ed3f35"></i>
                            加盟校区
                        </span>
                    </div>
                </div>
            </div>
            <!--监控-->
            <div class="monitor panel">
                <div class="inner">
                    <div class="tabs">
                        <a href="javascript:;" data-index="0" class="active">当前正在学习</a>
                    </div>
                    <div class="content" style="display: block;">
                        <div class="head">
                            <span class="col">账号名称</span>
                            <span class="col">校区</span>
                            <span class="col">在学功能</span>
                        </div>
                        <div class="marquee-view">
                            <div class="marquee">
                                <div class="row">
                                    <span class="col">19zs032337</span>
                                    <span class="col">建三江分校1 </span>
                                    <span class="col">智能默写复习</span>
                                    <span class="icon-dot"></span>
                                </div>
                                <div class="row">
                                    <span class="col">20sx0141288</span>
                                    <span class="col">石家庄市级直属分校1 </span>
                                    <span class="col">智能翻译学习</span>
                                    <span class="icon-dot"></span>
                                </div>
                                <div class="row">
                                    <span class="col">20sx0166835</span>
                                    <span class="col">泰安肥城分校3 </span>
                                    <span class="col">智能记忆学前测试</span>
                                    <span class="icon-dot"></span>
                                </div>
                                <div class="row">
                                    <span class="col">19zs016630</span>
                                    <span class="col">雁塔区直属分校1 </span>
                                    <span class="col">智能默写闯关测试</span>
                                    <span class="icon-dot"></span>
                                </div>
                                <div class="row">
                                    <span class="col">19zs007212</span>
                                    <span class="col">运营虚拟校区 </span>
                                    <span class="col">句子听力闯关测试</span>
                                    <span class="icon-dot"></span>
                                </div>
                                <div class="row">
                                    <span class="col">20sx0159449</span>
                                    <span class="col">兖州直属分校1 </span>
                                    <span class="col">智能记忆学习</span>
                                    <span class="icon-dot"></span>
                                </div>
                                <div class="row">
                                    <span class="col">20sx0167760</span>
                                    <span class="col">东港分校1 </span>
                                    <span class="col">大转盘抽奖</span>
                                    <span class="icon-dot"></span>
                                </div>
                                <div class="row">
                                    <span class="col">20sx0167792</span>
                                    <span class="col">鄄城直属分校1 </span>
                                    <span class="col">数学同步闯关</span>
                                    <span class="icon-dot"></span>
                                </div>
                                <div class="row">
                                    <span class="col">19zs030613</span>
                                    <span class="col">建三江分校1 </span>
                                    <span class="col">PK对战</span>
                                    <span class="icon-dot"></span>
                                </div>
                                <div class="row">
                                    <span class="col">18zs777796</span>
                                    <span class="col">泰安肥城分校3 </span>
                                    <span class="col">同步课文跟读学习</span>
                                    <span class="icon-dot"></span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <!--点位-->
            <div class="point panel">
                <div class="inner">
                    <h3>学段占比分析</h3>
                    <div class="chart">
                        <div class="pie"></div>
                        <div class="data">
                            <div class="item">
                                <h4 id="h_studytotal">320,11</h4>
                                <span>
                                    <i class="icon-dot" style="color: #ed3f35"></i>
                                    累计数量
                                </span>
                            </div>
                            <div class="item">
                                <h4 id="study_current">418</h4>
                                <span>
                                    <i class="icon-dot" style="color: #eacf19"></i>
                                    当前数量
                                </span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="column">
            <!-- 地图 -->
            <div class="map">
                <h3>
                    <span class="icon-cube"></span>
                    全国校区分布
                </h3>
                <div class="chart">
                    <div class="geo"></div>
                </div>
            </div>
            <!-- 用户 -->
            <div class="users panel">
                <div class="inner">
                    <h3>新开卡月统计</h3>
                    <div class="chart">
                        <div class="bar"></div>
                        <div class="data">
                            <div class="item">
                                <h4 id="h_cardcount">3,923</h4>
                                <span>
                                    <i class="icon-dot" style="color: #ed3f35"></i>
                                    本月总量
                                </span>
                            </div>
                            <div class="item">
                                <h4 id="h_monthcount">248</h4>
                                <span>
                                    <i class="icon-dot" style="color: #eacf19"></i>
                                    本月新增
                                </span>
                            </div>
							
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="column">
            <!-- 订单 -->
            <div class="order panel">
                <div class="inner">
                    <!-- 筛选 -->
                    <div class="filter">
                        <a href="javascript:;" data-key="day365" class="active">365天</a>
                        <a href="javascript:;" data-key="day90">90天</a>
                        <a href="javascript:;" data-key="day30">30天</a>
                        <a href="javascript:;" data-key="day1">24小时</a>
                    </div>
                    <!-- 数据 -->
                    <div class="data">
                        <div class="item">
                            <h4 id="h_ordercount">20,301,987</h4>
                            <span>
                                <i class="icon-dot" style="color: #ed3f35;"></i>
                                商城订单量
                            </span>
                        </div>
                        <div class="item">
                            <h4 id="h_shenhe">99834</h4>
                            <span>
                                <i class="icon-dot" style="color: #eacf19;"></i>
                                已审核
                            </span>
                        </div>
                    </div>
                </div>
            </div>
            <!-- 充值卡 -->
            <div class="sales panel">
                <div class="inner">
                    <div class="caption">
                        <h3>分时段在线统计</h3>
                    </div>
                    <div class="chart">
                        <div class="line"></div>
                    </div>
                </div>
            </div>
            <!-- 加盟商等级分布 -->
            <div class="wrap">
                <div class="channel panel">
                    <div class="inner">
                        <h3>CPU占用率</h3>                      
                   <div class="cpu"></div>   
                    </div>
                </div>
                <div class="quarter panel">
                    <div class="inner">
                        <h3>本月新增用户数分析</h3>
                        <div class="chart">
                            <div class="box">
                                <div class="gauge"></div>
                                <div class="label">75<small> %</small></div>
                            </div>
                            <div class="data">
                                <div class="item">
                                    <h4 id="m_zhengshi">1,321</h4>
                                    <span>
                                        <i class="icon-dot" style="color: #6acca3"></i>
                                        学员数量
                                    </span>
                                </div>
                                <div class="item">
                                    <h4>150%</h4>
                                    <span>
                                        <i class="icon-dot" style="color: #ed3f35"></i>
                                        环比增长
                                    </span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <!-- 排行榜 -->
            <div class="top panel">
                <div class="inner">
                    <div class="all">
                        <h3>内存占用率</h3>
                        <div class="all_cpu"></div>
                    </div>
					
                </div>
            </div>
        </div>
    </div>
</body>
<script src="js/jquery.min.js"></script>
<script src="echarts.min.js"></script>
<script src="./js/index.js"></script>

<script src="./js/china.js"></script>
<script src="./js/mymap.js"></script>

</html>
